<!-- 稿件上传 -->
<template>
	<view>
		<view class="all-box">
			<view class="topinput">
				<input class="input" placeholder="填写活动稿件标题" type="text" value="" v-model="btinput" />
				<uni-icons @click="close" style="position: relative;top: -65rpx;left: 675rpx;z-index: 100;" type="close" color="#999"
				 size="21">
				</uni-icons>
			</view>
			<view class="gjjc">
				<view class="tp-pb20">
					<text class="tp-fz28 ">稿件介绍</text>
				</view>
				<view class="gjtxt">
					<textarea style="width: 100%;" v-model="content" placeholder="请填写介绍稿件内容" placeholder-style="font-size: 24rpx;color: #999999;"
					 maxlength="300" />
					<text style="position: absolute;right: 55rpx;top: 450rpx;color: #999999;">200字左右</text>
				</view>
			</view>
			<!-- 上传照片 S-->
			<view class="photo">
				<view class="" >
					<view class="tp-w690  tp-bgf tp-bbox tp-br12 tp-fz30 tp-fc333">
						
						<view class="level_align flex_wrap">
							<view class="" style="position: relative;" v-for="(item,index) in list" :key="index" >
								<image @click="previewImg(item)" class="zheng-img tp-br12" :src="item" :style="{marginRight:(index+1)%3 == 0 ?'0':'35rpx'}" mode="aspectFill"></image>
								<image @click.stop="delThisImg(index)" class="close-icon" src="../static/icon/close4.png" mode=""></image>
							</view>
							<image v-if="list.length < 9" @click="handleUploadIDImgPositive" class="zheng-img tp-br12" src="../static/icon/photo.png" mode=""></image>
							
						</view>
						<!-- <text class="tp-fc999 tp-fz24">最多上传3张图片</text> -->
					</view>
				</view>
				
			</view>
			<!-- 上传照片 E-->
			<!-- 稿件上传 S-->
			<view class="tit_r tp-ptb0lr30 tp-mt30" >
				<view class="tp-mb20 tp-fz28">
					<text>稿件上传(word格式)</text>
				</view>
				<view class="scbox" @click="selectWhat" v-if="wordorpdf==''">
					<image src="../static/icon/gaojian.png" mode=""></image>
				</view>
				<view class="scbox" v-if="wordorpdf!=''">
					<image src="../static/icon/haveword.png" mode=""></image>
					<image src="../static/icon/close4.png" @click="delword" class="tp-img32" style="position: relative;top: -350rpx;left: 80rpx;"></image>
				</view>
				<!-- <view class="" >
					<text style="width: 70%;height: 100rpx;background: #00B4FF;word-wrap: break-word;word-break: break-all;">{{wordorpdf}}</text>
						<image src="../static/icon/close4.png" @click="delword" class="tp-img32" style="margin-top: 30rpx;"></image>
				</view> -->
			</view>
			<!-- 稿件上传 E-->
			<!-- 上传视频 S-->
			<view class="tp-ptb0lr30  tp-pt30" style="padding-bottom: 88rpx;" >
				<view class=" flex_between flex">
					<text class="tp-fz30 tp-mr30">上传视频(mp4格式)</text>
				</view>
				<view class="tp-mt20 tp-mb20" v-show="addVideo">
					<image class="zheng-img tp-br12" src="../static/icon/video.png" @click="test"></image>
				</view>
				<view class="" v-show="showVideo" style="position: relative;">
					<video class="video" :src="src" style="video"></video>
					<image src="../static/icon/close4.png" @click="DelImg" class="close-img" style="height: 36rpx;"></image>
				</view>
			</view>
			<!-- 上传视频 E-->
			
		</view>
		<view class="bottom-box flex flex_around tp-bgf"  style="position: fixed;bottom: 0;z-index: 10;">
			<view class="zxtg" @click="mygaojian">
				发布稿件
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',//活动id
				xqid:'',//失败进来就获取详情id
				detail:'',//失败的详情
				btinput: '',//标题
				list: [], // 上传的图片
				uplist: [], // 要上传的图片
				content:'',//介绍
				update: {
					imgExt: '', // 图片字段拼接字符串
				},
				
				src: '', //上传的视频
				showVideo: false, //视频//视频
				addVideo: true, //视频
				videourl:'',//传给后端的路径
				videofmurl:'',//传给后端的视频封面
				wordorpdf:'',//传给后端的文件
			};
		},
		onLoad(opt) {
			console.log(opt)
			if(opt.id){
				this.id = opt.id
			}
			if(opt.xqid){
				this.xqid = opt.xqid
				this.getdetail()
			}
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
						let curRoute = routes[routes.length - 2].route // 获取当前页面路由，也就是最后一个打开的页面路由
						console.log(curRoute)
						if(curRoute == 'pagesSecond/strategy/strategyRelease'){
							uni.setStorage({
							    key: 'word',
							    data: opt.res,
							    success: function () {
							        console.log('success');
							    },
							});
							uni.navigateBack({
								delta: 1
							})
						}
		},
		onShow() {
			if(this.xqid == ''){
				this.wordorpdf = uni.getStorageSync('word');
			}
				
		},
		methods: {
			//获取失败的数据
			getdetail() {
				this.$http.get(this.$api.activityDetailDesc + '?detailId=' + this.xqid).then(res => {
					if (res.code == 200) {
						this.detail = res.data
						this.btinput = this.detail.articleName
						this.content = this.detail.intro
						// this.list.push(this.$baseUrl + this.detail.images)
						// this.list = this.$baseUrl + this.detail.images.split(',')
						this.id = this.detail.activityId
						// this.update.imgExt = this.detail.images
						this.wordorpdf = this.detail.fileContent
						this.src = this.$baseUrl +  this.detail.video
						this.xqid = ''
					}
				})
			},
				// 选择什么文件
						selectWhat() {
							const _this = this
							uni.showActionSheet({
								itemList: ['手机文件 '],
								success: function(res) {
									console.log(res)
									switch (res.tapIndex) {
										case 0:
											_this.selectFile()
											break;
										default:
									}
								},
								fail: function(res) {
									console.log(res.errMsg);
								}
							});
						},
							// 选择手机文件
									selectFile(){
										// this.upfile = true
										uni.navigateTo({
											url:'/pagesSecond/strategy/web-view-local'
										})
									},
						// 选择什么文件E
			close() {
				this.btinput = ''
			},
			// 上传图片
			handleUploadIDImgPositive() {
				const _this = this
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera '],
					success: ({tempFilePaths}) => {
						if(tempFilePaths.length<=9){
						for(let i = 0 ; i < tempFilePaths.length ; i++){
							uni.uploadFile({
								url: _this.$baseUrl + _this.$api.uploadFile,
								filePath: tempFilePaths[i],
								name: 'file',
								success: (uploadFileRes) => {
									let uploadData = JSON.parse(uploadFileRes.data)
									if(_this.list.length<9){
										_this.list.push(this.$imgUrl + uploadData.url)
										console.log(_this.list)
										_this.uplist.push(uploadData.url)
										_this.update.imgExt = _this.uplist.join(',')
									}else{
										uni.showToast({
											title: '最多九张图片',
											icon: 'none'
										})
									}
									 
									// _this.$set(this.updata, key, uploadData.url)
								}
							})
						}
						
					}
					}
				});
			},
			// 删除这个图片
			delThisImg(index){
				this.list.splice(index,1)
				this.update.imgExt = this.list.join(',')
			},
			// 预览图片
			previewImg(url) {
				console.log(url);
				uni.previewImage({
					current: url,
					urls: this.list,
					success: function(){
						console.log('预览')
					},
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			//上传视频
			test() {
				var self = this;
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: function(res) {
						self.showVideo = true
						self.addVideo = false
						 self.src = res.tempFilePath;
						 console.log(res)
						uni.uploadFile({
							url: self.$baseUrl + self.$api.uploadFile,
							filePath: res.tempFilePath,
							name: 'file',
							// formData: {
							//     'user': 'test'
							// },
							 header: {
								/* Authorization: 'Bearer ' + uni.getStorageSync('token') *///无要求时注释
							}, 
							success: (uploadFileRes) => {
								let bold = JSON.parse(uploadFileRes.data)
								self.videourl = bold.url
								uni.uploadFile({
									url: self.$baseUrl + self.$api.uploadFile,
									filePath: res.thumbTempFilePath,
									name: 'file',
									success: (uploadFileRes) => {
										console.log('1张', uploadFileRes);
										let uploadData = JSON.parse(uploadFileRes.data)
										console.log(uploadData)
										self.videofmurl = uploadData.fileName
									}
								})
							},
						});
					}
				});
			},
			//右上角删除视频
			DelImg() {
				this.src = '',
					this.showVideo = false,
					this.addVideo = true
			},
			//清除稿件
			delword(){
				uni.removeStorage({
					key: 'word',
					success: function(res) {
						console.log('success');
					}
				});
				this.wordorpdf = ''
			},
			//发布稿件
			mygaojian(){
				if(this.btinput==''){
									 uni.showToast({
									 	title: '标题不能为空',
									 	icon: 'none'
									 })
									 return
				}
				if(this.wordorpdf==''){
									 uni.showToast({
										title: '请上传稿件',
										icon: 'none'
									 })
									 return
				}
				if(this.content==''){
									 uni.showToast({
										title: '简介不能为空',
										icon: 'none'
									 })
									 return
				}
				let param = {
					activityId:this.id,//活动ID
					articleName:this.btinput,//标题
					content:'',//内容
					images:this.update.imgExt,//	图片
					fileContent:this.wordorpdf,//	文件
					video:this.videourl,//视频
					intro:this.content,//介绍
				}
				this.$http.post(this.$api.activitypublishPersonal,param).then(res => {
					if(res.code == 200){
						uni.showToast({
							title: '稿件已上传,请等待审核',
							icon: 'none'
						})
						uni.removeStorage({
							key: 'word',
							success: function(res) {
								console.log('success');
							}
						});
						if(this.xqid==''){
							uni.navigateBack({
								delta: 1
							})
						}else{
							uni.navigateBack({
								delta: 2
							})
						}
						
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	/* 视频上传样式S */
		.zheng-img {
			width: 188rpx;
			height: 188rpx;
		}
		.close-img {
			position: absolute;
			height: 36rpx !important;
			width: 36rpx !important;
			top: 6rpx;
			right: -21rpx;
		}
		 .video {
			margin: 30rpx 0 30rpx 0;
			width: 690rpx;
			height: 360rpx;
			border-radius: 8rpx;
		} 
		
	/* 视频上传样式E */
	/* 大box */
	.all-box{
		width: 100%;
		background: #FFFFFF;
		padding-bottom: 30rpx;
	}
	.topinput {
		width: 100%;
		height: 110rpx;
		background: #FFFFFF;
		padding-top: 30rpx;

		.input {
			padding-left: 20rpx;
			width: 690rpx;
			margin: 0 auto;
			height: 80rpx;
			border: 2rpx solid #EBEBEB;
			border-radius: 8rpx;

		}
	}
	/* 稿件介绍 */
	.gjjc{
		width: 690rpx;
		padding:0 30rpx 30rpx 30rpx;
		box-sizing: border-box;
		.gjtxt{
			 padding: 20rpx 20rpx 0 20rpx; 
			box-sizing: border-box;
			width: 690rpx;
			max-height: 340rpx;
			background: #F5F5F5;
			border-radius: 8rpx;

		}
	}
	/* 上传照片 */
	.zheng-img{
		width: 188rpx;
		height: 188rpx;
	}
	.close-icon{
		position: absolute;
		top: -14rpx;
		right: 14rpx;
		width: 28rpx;
		height: 28rpx;
	}
	/* 上传文件 */
	.scbox{
		width: 188rpx;
		height: 188rpx;
		background: #F5F5F5;
		border-radius: 8rpx;
		line-height: 188rpx;
		font-size: 28rpx;
		font-weight: bold;
		font-family: PingFang SC;
		color: #999999;
		text-align: center;
	}
	/* 底部按钮 */
	.bottom-box{
		width: 100%;
		
		.zxtg{
			width: 560rpx;
			height: 88rpx;
			background: #00B4FF;
			border-radius: 8rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 88rpx;
			margin-bottom: 30rpx;
			margin-top: 30rpx;
		}
	}
</style>
